import React, {  } from 'react'
import styles from './index.module.less'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination } from 'swiper';
import 'swiper/css'
export interface columnsType {
    dataIndex: string,
    align?: 'left' | 'right' | 'center',
    index?: string,
    width?: string,
    title?: string
}
export interface tableProps {
    data: any[],
    columns: columnsType[],
    rollTime?: number,
    rollNum?: number,
    rollTop?: number,
    flag?: boolean,
}


const Table = (props: tableProps) => {
    const { data, columns, flag = true, } = props
    return (
        <div className={styles.table_container}>
            <div className={styles.table_title}>
                <div className={styles.table_row}>
                    {
                        columns.map(th => <div className={styles.table_col} key={th.dataIndex} style={{ padding: '0 10px', ...th }} >{th.title}</div>)
                    }
                </div>
            </div>
            <div style={{ height: 4 }}></div>
            <Swiper
                modules={[Autoplay, Pagination]}
                direction='vertical'
                style={{ width: '100%', height: 7 * 36 }}
                autoplay={flag && data?.length > 7}
                loop
                slidesPerView={7}
            >
                {
                    data?.map((da: any, i) => (
                        <>
                            <SwiperSlide key={i + 'SwiperSlide'}>
                                <div className={styles.table_row} key={i + 'table_row'}>
                                    {
                                        columns.map((column: columnsType) => {
                                            return (
                                                <div className={styles.table_col} style={{ padding: '0 10px' }} key={i + column.dataIndex}>{da[column.dataIndex]}</div>
                                            )
                                        })
                                    }
                                </div>
                                <div key={i + 'space'} style={{ height: 4 }} ></div>
                            </SwiperSlide>
                        </>

                    ))
                }
            </Swiper>
            <div>
                共<span>{data?.length}条记录</span>
            </div>
        </div >
    )
}

export default React.memo(Table)